1`<template>
	<view class="page">
		<template v-if="isLogin">

			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>

			<template v-else>
				<view class="body">
					<view class="map">
						<map id="map" :longitude="detail.pcdata.gcj02_lng" :latitude="detail.pcdata.gcj02_lat"
							:markers="markers" scale="16" show-location style="width: 100%; height: 150px;"></map>
					</view>
					<view class="data-list">
						<view class="item">
							<view class="label">天气情况</view>
							<text class="val">{{detail.pcdata.weather}}</text>
						</view>
						<view class="item">
							<view class="label">空气温度(°C)</view>
							<text class="val">{{detail.pcdata.temperature}}</text>
						</view>
						<view class="item">
							<view class="label">空气湿度(%)</view>
							<text class="val">{{detail.pcdata.humidity}}</text>
						</view>
						<view class="item">
							<view class="label">海拔</view>
							<text class="val">{{detail.pcdata.altitude|toFixedN(2)}}</text>
						</view>
					</view>
					<view class="hd-title">数据详情</view> 
					<view class="detail-wrap m-b2">
						<view class="detail-item">
							<view class="label">经纬度：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.local}}</view>
								</view>
							</view>
						</view>
						<view class="detail-item">
							<view class="label">施药地点：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.address}}</view>
								</view>
							</view>
						</view>
						<view class="detail-item">
							<view class="label">生境类型：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.env_type}}</view>
								</view>
							</view>
						</view>
						<!-- <view class="detail-item">
							<view class="label">防控面积：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.fk_area||0}} </view>
									<view class="link">亩</view>
								</view>
							</view>
						</view>
						<view class="detail-item">
							<view class="label">药剂用量：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.bait_count||0}} </view>
									<view class="link">公斤</view>
								</view>
							</view>
						</view> -->
						<view class="detail-item">
							<view class="label">扑杀蚁巢数量：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.kill_count||0}} </view>
									<view class="link">个</view>
								</view>
							</view>
						</view>
						<view v-if="detail.pcdata.gl_proid_name" class="detail-item">
							<view class="label">参与项目：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.gl_proid_name}} </view> 
								</view>
							</view>
						</view>
						<view class="detail-item">
							<view class="label">作业时间：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.create_time}}</view>
								</view>
							</view>
						</view>
						<view class="detail-item">
							<view class="label">采集人员：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.realname}}</view>
								</view>
							</view>
						</view> 
						<view v-if="detail.pcdata.sy_uuid" class="detail-item">
							<view class="label">溯源码：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val">{{detail.pcdata.sy_uuid}}</view>
								</view>
							</view>
						</view>
						
						<view class="detail-item">
							<view class="label">审核状态：</view>
							<view class="detail-input">
								<view class="content">
									<view class="val f-red" v-if="detail.pcdata.audit_status==0">审核中</view>
									<view class="val f-green" v-if="detail.pcdata.audit_status==1">审核通过</view>
									<view class="val f-red" v-if="detail.pcdata.audit_status==2">审核失败，{{detail.pcdata.audit_remark}}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="hd-title">作业照片</view>
					<view class="detail-wrap">
						<view class="detail-pic-item">
							<view class="detail-pic">
								<view class="pic-item" v-for="(item,index) in detail.pcFiles" :key="index">
									<image src="@/static/images/filter_bg.png" mode="widthFix">
										<!-- 占位 -->
									</image>
									<view class="img-wrap" @click="preview(index)">
										<image class="img" :src="http_request_url+'/image/image?path='+item.file_path"
											mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>

				<view class="footer">
					<view class="fix-wrap btn-wrap">
						<view class="item-horizontal flex-grow-1" :class="detail.pcdata.audit_status==0?'blue':'grey'" @click="deleteData">
							<view class="icon">
								<view class="iconfont f-s36">&#xe74b;</view>
							</view>
							<view class="name">删除</view>
						</view> 
						<view class="item-horizontal flex-grow-1 red" @click="openNavigation">
							<view class="icon">
								<view class="iconfont icon-daohang f-s40">&#xe648;</view>
							</view>
							<view class="name">导航</view>
						</view>
					</view>
				</view>
				
				<view class="share-btn" @click="shareAddress">
					<view class="icon">
						<image src="@/static/images/share_address_icon.png" mode="widthFix"></image>
					</view>				 
				</view>
			</template>
 

		</template>

	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import {
		HTTP_REQUEST_URL
	} from '@/config.js'
	import {
		previewImage,d2Dms
	} from '@/common/util.js'
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: false,
				loadingState: {
					default: true,
					loading: false,
					compelted: false
				},
				id: '',
				detail: {},
				http_request_url: HTTP_REQUEST_URL,
				markers: [],
			}
		},
		filters:{
			toFixedN:function(val,n){
				val=Number(val);
				return val.toFixed(n);
			}
		},
		onShow() {

		},
		async onLoad(params) {
			this.id = params.id;
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.getfkDataDetail();
			}
		},
		methods: {

			// 获取详情
			getfkDataDetail: async function() {
				let res = await this.$api.yfk_api.getfkDataDetail({
					id: this.id
				})  
				if (res.data.ret == 0) { 
					this.loadingState.default = false;
					let lat=d2Dms(parseFloat(res.data.data.pcdata.gcj02_lat).toFixed(6));
					let lng=d2Dms(parseFloat(res.data.data.pcdata.gcj02_lng).toFixed(6));
					res.data.data.pcdata.local=lat+'，'+lng; 
					this.detail = res.data.data;
					this.markers.push({
						id: 0,
						latitude: res.data.data.pcdata.gcj02_lat,
						longitude: res.data.data.pcdata.gcj02_lng,
						iconPath: '../../static/images/mark4.png',
						width: '60',
						height: 40
					})
				}
			},

			// 图片预览
			preview: function(idx) {
				let img_list = [];
				this.detail.pcFiles.forEach(item => {
					img_list.push(this.http_request_url + '/image/image?path=' + item.file_path)
				})
				previewImage({
					data: img_list,
					index: idx
				})
			},

			// 打开导航
			openNavigation: function() {
				uni.openLocation({
					latitude: parseFloat(this.detail.pcdata.gcj02_lat),
					longitude: parseFloat(this.detail.pcdata.gcj02_lng),
					name: this.detail.pcdata.address,
					address: this.detail.pcdata.address,
					scale: 18
				})
			},

			//删除数据
			deleteData: function() {
				let _this = this;
				if(this.detail.pcdata.audit_status==0){
					uni.showModal({
						content: '确认删除该条数据？',
						success: async function(res) {
							if (res.confirm) {
								let del_res = await _this.$api.yfk_api.deleteData({
									id: _this.id,
									status: 0
								}) 
								if (del_res.data.ret == 0) {
									uni.showToast({
										icon: "success",
										title: '删除成功',
										mask: true,
										success() {
											_this.$store.commit('UPDATE_FK_LIST', 1);   // 状态变化 更新列表
											setTimeout(() => {
												uni.navigateBack({
													delta:1
												})
											}, 300)
										}
									})
								}
							}
						}
					})
				}else{
					uni.showModal({
						content: '已审核数据不能删除',
						confirmText:'我知道了',
						success: function(res) {
							if (res.confirm) {
								 
							} 
						}
					})
				}
				
			},
			
			// 分享位置
			shareAddress:function(){ 			
				uni.share({
					provider:'weixin',
					type:0,
					title:this.detail.pcdata.address,
					href:`http://www.honghuoyi.com/plus/m_map.php?addr=${this.detail.pcdata.address}&longitude=${this.detail.pcdata.gcj02_lng}&latitude=${this.detail.pcdata.gcj02_lat}`,
					imageUrl:'../../static/images/share_area_icon.png',
					scene:'WXSceneSession',    // WXSceneTimeline  朋友圈    WXSceneSession 聊天界面
					summary:'',
					success:function(res){ 
					},
					fail(err) { 
						if(err.code==-8){
							// 未安装应用
							uni.showModal({
								content:'未检测到客户端，请先下载安装客户端',
								mask:true,
								confirmText:'我知道了', 
								showCancel:false,
								success(m_res) {
									 
								}
							}) 
						}
					}
				})
			}

		},
		computed: {

		},
		components: {
			loading,
			empty
		}
	}
</script>

<style scoped lang="less">
	.map {
		height: 300rpx;
		background: #ccc;
	}

	.data-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #fff;
		margin: 0 auto 20rpx;
		padding: 20rpx 0;
		border-top: 1rpx dashed #ddd;

		.item {
			width: 22%;
			font-size: 28rpx;
			text-align: center;

			.label {
				margin-bottom: 10rpx;
				color: #999;
			}
		}
	}

	.hd-title {
		margin-bottom: 20rpx;
		padding: 0 20rpx;
		border-left: 10rpx solid #f00;
		font-size: 32rpx;
		font-weight: bold;
	}

	.project-handle-area {

		.detail-item,
		.form-item {
			border-bottom: 0 none;
		}

		.form-textarea {
			border: 1rpx solid #ddd;
		}
	}
	.share-btn{
		position: fixed;
		right:20rpx;
		bottom:250rpx;
		width: 120rpx;
		height: 120rpx;
		image{
			width: 100%;
		}
	}
</style>
